*{padding: 0; margin: 0;}
html,body{height: 100%;}
div.text{
    width: 1rem /* 100/100 */;
    height: 1rem /* 100/100 */;
    background-color: greenyellow;
}
body {
    background: #000d4a url(../imgs/bg.jpeg) center top;
    display: flex;
    flex-direction: column;
}
header {
    width: 100%;
    height: 1.05rem
        /* 105/100 */
    ;
    background: url(../imgs/head_bg.png) no-repeat center center;
    text-align: center;
    position: relative;
    top: .25rem /* 25/100 */;
    color: #fff;
    font-size: .30rem/* 30/100 */
    ;

    span {
        position: absolute;
        right: .2rem/* 20/100 */
        ;
        top: .15rem /* 15/100 */
        ;
    }
}
// 内容
.charts{
    flex: 1;
    margin: .2rem /* 20/100 */;
    display: flex;
    height: 100%;
    justify-content:space-around;
    .column{
        width: 30%;
        height: 100%;
        // position: relative;
        &:nth-of-type(2){
            width: 40%;
            height: 100%;
            margin: .1rem /* 10/100 */;
        }
        .box{
            width: 100%;
            margin-bottom: .15rem /* 15/100 */;
            background-color: rgba(0,0,0,.1);
                position: relative;
                z-index: 10;
            .alltitle {
                font-size: 18px;
                color: #fff;
                position: relative;
                padding-left: 12px;
                margin-bottom: 10px;
                z-index: 20;

            }
            .alltitle:before {
                width: 5px;
                height: 20px;
                top: 2px;
                position: absolute;
                content: "";
                background: #49bcf7;
                border-radius: 20px;
                left: 0;
                z-index: 20;

            }
           .table{
            min-height: .1rem /* 40/100 */;
            color:rgb(103, 102, 115);
            height: 90%;
            font-size: .2rem /* 20/100 */;
            width: 100%;
            margin-left: .2rem /* 20/100 */;
                span{
                    width: .24rem /* 24/100 */;
                    height: .24rem /* 24/100 */;
                    border-radius: .03rem /* 3/100 */;
                    display: block;
                    color: #fff;
                    line-height: .24rem /* 24/100 */;
                    text-align: center;
                    // background-color: red;
                }
           }
           .table tr:nth-of-type(1) {
               color: rgb(154, 157, 161);
               font-size: .24rem /* 24/100 */;
           }

        }
    }
    .box2{

        table{
            color:rgb(153, 155, 169);
            min-height: .1rem;
            // height: 90%;
            font-size: .2rem ;
            width: 100%;
            margin-left: .2rem;
            margin-bottom: .1rem /* 10/100 */;
            tr{
                display: flex;
                justify-content:space-around;
                margin-left: -10%;
            }
        }
        .tableCenter {
            color: rgb(153, 155, 171);
            font-size: .2rem /* 20/100 */;
            height: 1.7rem /* 180/100 */;
            overflow: hidden;
            ul{
                height: .5rem /* 50/100 */;
            }
            ul li{
                display: flex;
                justify-content:space-around;
                margin-left: -20px;
                margin-top: .1rem /* 10/100 */;
            }
        }
    }
    .box4{
        display: flex;
        // justify-content:space-around;
       .box31{
           width: 4.45rem /* 445/100 */;
           height: 1.14rem /* 114/100 */;
       }
       .box32{
           width: 1.55rem /* 155/100 */;
           height: 1.7rem /* 170/100 */;
       }
       .box33{
           width: 1.55rem /* 155/100 */;
           height: 1.7rem /* 170/100 */;
       }
       .box34{
           width: 1.55rem /* 155/100 */;
           height: 1.7rem /* 170/100 */;
       }
       .alltitle{
           font-size: .16rem /* 16/100 */;
       }
    }
     .box4biaoti {
         color: #fff;
         font-size: .16rem /* 16/100 */;
         text-align: center;
         margin-top: .2rem /* 10/100 */;

     }
     .box4biaoti1{
        margin-top: .2rem /* 20/100 */;
        color: #fff;
        font-size: .30rem;
     }
     .box4biaotimian{
         color:rgb(254, 240, 0);
         font-size: .6rem /* 80/100 */;
         text-align: center;
        margin-top: .3rem /* 30/100 */;
     }
    
}